<template>
	<view class="content bg_com">
		<view class="open_box">
			<view class="item_box" v-show="type == 'open' || type == 'close'">
				<view class="title">
					请输入密码
				</view>
				<VcodeInput class="passInput" ref="passInput" v-if="type == 'open' || type == 'close'" @vcodeInput="vcodeInput" />
			</view>
			<view class="item_box" v-show="type == 'openConfirm'">
				<view class="title">
					请再次输入密码
				</view>
				<VcodeInput class="passInput" v-if="type == 'openConfirm'" @vcodeInput="vcodeInputConfirm" />
			</view>
			<view class="msg" v-show="type == 'open' || type == 'openConfirm'">
				设置的密码将用于关闭青少年模式时的验证
			</view>
			<view class="msg" v-show="type == 'close'">
				输入正确密码后，将关闭青少年模式
			</view>
			<view class="fogetpass" v-show="type == 'close'" @click="jumpForget">
				忘记密码？
			</view>
		</view>
		
		
	</view>
</template>

<script>
	import VcodeInput from '@/components/vcode-input/vcode-input.vue'
	import {
		mapActions,
		mapState
	} from 'vuex';
	import {
		des_encrypt,
		desAndBase
	} from '@/common/encryption.js'
	export default {
		computed: mapState(['identity']),
		components: {
			VcodeInput
		},
		data() {
			return {
				password: '',
				securityPwd: '',
				type: 'none'
			}
		},
		onLoad(e) {
			if(e.type) {
				this.type = e.type;
			}else {
				this.type = 'none';
			}
			
		},
		methods: {
			...mapActions(['GetInfo']),
			jumpForget() {
				uni.navigateTo({
					url: 'forgetPassword?title=忘记密码'
				})
			},
			/* 密码 */
			vcodeInput(e) {
				console.log(e+'=======')
				if(this.type == 'open') {
					this.password = e;
					this.type = 'openConfirm';
				}else if(this.type == 'close') {
					this.securityPwd = e;
					uni.showLoading({
						title: '请稍后...'
					})
					this.adolescentClose();
				}
			},
			/* 密码 */
			vcodeInputConfirm(e) {
				let _this = this;
				if(this.password + '' === e + '') {
					this.securityPwd = e;
					uni.showLoading({
						title: '请稍后...'
					})
					this.adolescentOpen();
				}else {
					this.type = 'none';
					this.$nextTick(function(){
						_this.type = 'openConfirm';
					})
					uni.showToast({
						title: '两次密码不一致',
						icon: 'none'
					})
				}
				
			},
			/* 打开青少年模式 */
			adolescentOpen() {
				this.$api.adolescentOpen({
					uid: this.identity.uid,
					securityPwd: des_encrypt(this.securityPwd)
				}).then(res => {
					uni.hideLoading();
					if(res.code == 200) {
						this.GetInfo({
							uid: this.identity.uid
						});
						uni.$emit('success',{
							msg: '开启成功'
						});
						uni.navigateBack();
					}
				}).catch(err => {
					uni.hideLoading();
				})
			},
			/* 关闭青少年模式 */
			adolescentClose() {
				let _this = this;
				this.$api.adolescentClose({
					uid: this.identity.uid,
					securityPwd: des_encrypt(this.securityPwd)
				}).then(res => {
					uni.hideLoading();
					if(res.code == 200) {
						this.GetInfo({
							uid: this.identity.uid
						});
						uni.$emit('success',{
							msg: '关闭成功'
						});
						uni.navigateBack();
					}else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						});
						this.$refs.passInput.clearValue();
					}
				}).catch(err => {
					uni.hideLoading();
					_this.type = 'none';
					this.$nextTick(function(){
						_this.type = 'close';
					})
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		width: 100%;
		height: 100%;
		padding: 0 53rpx;
		box-sizing: border-box;

		.passInput {
			margin-top: 36rpx;
		}

		.title {
			margin-top: 30rpx;
			font-size: 34rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #F1EDFF;
		}

		.msg {
			margin-top: 36rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #F1EDFF;
			opacity: 0.5;
		}

		.fogetpass {
			margin-top: 16rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #3DFFF2;
			opacity: 0.5;
		}
	}
</style>
